<template>
	<view class="">
		<form @submit="formSubmit">
					<scroll-view scroll-y>
					
						
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									生源地
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="birthplace" placeholder="输入生源地" :value="birthplace"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									
								</view>
								<view class="text">
									城乡生源
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="urbanRuralSource" placeholder="城乡生源" :value="urbanRuralSource"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									入学日期
								</view>
							</view>
							<view class="right">
								<picker mode="date"  @change="enrollmentDateChange" :value="enrollmentDate" name="date" start="1970-01-01" end="2050-01-01">
									<view class="uni-input">{{enrollmentDate}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									预计毕业日期
								</view>
							</view>
							<view class="right">
								<picker mode="date"  @change="expectedGraduationDateChange" :value="expectedGraduationDate" name="expectedGraduationDate" start="1970-01-01" end="2050-01-01">
									<view class="uni-input">{{expectedGraduationDate}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									预计答辩日期
								</view>
							</view>
							<view class="right">
								<picker mode="date"  @change="expectedDefenseDateChange" :value="expectedDefenseDate" name="expectedDefenseDate" start="1970-01-01" end="2050-01-01">
									<view class="uni-input">{{expectedDefenseDate}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学生类别
								</view>
							</view>
							<view class="right">
								<picker @change="studentCategoryChange" :value="studentCategoryIndex" :range="studentCategoryArray" name="studentCategory">
									<view class="uni-input">{{studentCategoryArray[studentCategoryIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									入学方式
								</view>
							</view>
							<view class="right">
								<picker @change="admissionMethodChange" :value="admissionMethodIndex" :range="admissionMethodArray" name="admissionMethod">
									<view class="uni-input">{{admissionMethodArray[admissionMethodIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									培养方式
								</view>
							</view>
							<view class="right">
								<picker @change="trainingMethodChange" :value="trainingMethodIndex" :range="trainingMethodArray" name="trainingMethod">
									<view class="uni-input">{{trainingMethodArray[trainingMethodIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									培养院系
								</view>
							</view>
							<view class="right">
								<picker @change="trainingDepartmentChange" :value="trainingDepartmentIndex" :range="trainingDepartmentArray" name="trainingDepartment">
									<view class="uni-input">{{trainingDepartmentArray[trainingDepartmentIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学生来源
								</view>
							</view>
							<view class="right">
								<picker @change="studentSourceChange" :value="studentSourceIndex" :range="studentSourceArray" name="studentSource">
									<view class="uni-input">{{studentSourceArray[studentSourceIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学习方式
								</view>
							</view>
							<view class="right">
								<picker @change="learningMethodChange" :value="learningMethodIndex" :range="learningMethodArray" name="learningMethod">
									<view class="uni-input">{{learningMethodArray[learningMethodIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学位院系
								</view>
							</view>
							<view class="right">
								<picker @change="degreeDepartmentChange" :value="degreeDepartmentIndex" :range="degreeDepartmentArray" name="degreeDepartment">
									<view class="uni-input">{{degreeDepartmentArray[degreeDepartmentIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									培养层次
								</view>
							</view>
							<view class="right">
								<picker @change="trainingLevelChange" :value="trainingLevelIndex" :range="trainingLevelArray" name="trainingLevel">
									<view class="uni-input">{{trainingLevelArray[trainingLevelIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学制
								</view>
							</view>
							<view class="right">
								<picker @change="academicSystemChange" :value="academicSystemIndex" :range="academicSystemArray" name="academicSystem">
									<view class="uni-input">{{academicSystemArray[academicSystemIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									专业
								</view>
							</view>
							<view class="right">
								<picker @change="majorChange" :value="majorIndex" :range="majorArray" name="major">
									<view class="uni-input">{{majorArray[majorIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									研究方向
								</view>
							</view>
							<view class="right">
								<picker @change="researchDirectionChange" :value="researchDirectionIndex" :range="researchDirectionArray" name="researchDirection">
									<view class="uni-input">{{researchDirectionArray[researchDirectionIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									主修外语
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="mainForeignLanguage" placeholder="输入名称" :value="mainForeignLanguage"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									指导老师
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="supervisor" placeholder="输入姓名" :value="supervisor"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									办学形式
								</view>
							</view>
							<view class="right">
								<picker @change="schoolingFormChange" :value="schoolingFormIndex" :range="schoolingFormArray" name="schoolingForm">
									<view class="uni-input">{{schoolingFormArray[schoolingFormIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									外语水平
								</view>
							</view>
							<view class="right">
								<picker @change="foreignLanguageLevelChange" :value="foreignLanguageLevelIndex" :range="foreignLanguageLevelArray" name="foreignLanguageLevel">
									<view class="uni-input">{{foreignLanguageLevelArray[foreignLanguageLevelIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									联合培养单位
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="trainingUnit" placeholder="输入单位" :value="trainingUnit"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									定向委培单位
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="commissionedUnit" placeholder="输入单位" :value="commissionedUnit"/>
										
							</view>
						</view>
						
						
						
						
					
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									定向委培单位所在地
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="orientationUnitLocation" placeholder="输入地址" :value="orientationUnitLocation"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									教育基地
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="educationBase" placeholder="输入基地名称" :value="educationBase"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									辅导员
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="counselor" placeholder="输入姓名" :value="counselor"/>
										
							</view>
						</view>
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									留学人员
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="overseasStudent" placeholder="输入姓名" :value="overseasStudent"/>
										
							</view>
						</view>
						
						
						
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									假期乘火车起始车站
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="startingStation" placeholder="输入车站" :value="startingStation"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									终点车站
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="destinationStation" placeholder="输入政治面貌" :value="destinationStation"/>
										
							</view>
						</view>
						
				
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									银行卡号
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="bankCardNumber" placeholder="输入卡号" :value="bankCardNumber"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									开户行
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="openingBank" placeholder="输入开户行" :value="openingBank"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									所属银行
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="bankAffiliation" placeholder="输入银行" :value="bankAffiliation"/>
										
							</view>
						</view>
						
						
						
						
						
						
						
						
				</scroll-view>		
						<view class="uni-btn-v">
							<button form-type="submit" class="but">确认提交</button>
						
						</view>
		</form>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const birthplace = ref('');//生源地
const urbanRuralSource = ref('');//城乡生源
const enrollmentDate = ref('0000-00-00');//入学日期
const expectedGraduationDate = ref('0000-00-00');//预计毕业日期
const expectedDefenseDate = ref('0000-00-00');//预计答辩日期 
const studentCategoryArray = ref(['请选择类型','本科生','研究生','博士生']);//学生类别
const studentCategoryIndex = ref(0);
const admissionMethodArray = ref(['请选择类型','自考','统招','内招']);//入学方式
const admissionMethodIndex = ref(0);
const trainingMethodArray = ref(['请选择类型','自考','统招','内招']);//培养方式
const trainingMethodIndex = ref(0);
const trainingDepartmentArray = ref(['请选择类型','计算机','汉语言','国际贸易']);//培养院系
const trainingDepartmentIndex = ref(0);
const studentSourceArray = ref(['请选择类型','推荐','提前批','内招']);//学生来源
const studentSourceIndex = ref(0);
const learningMethodArray = ref(['请选择类型','自学','被迫学','边玩边学']);//学习方式
const learningMethodIndex = ref(0);
const degreeDepartmentArray = ref(['请选择类型','计算机','导演','美术']);//学位院系
const degreeDepartmentIndex = ref(0);
const trainingLevelArray = ref(['请选择类型','学前教育','专科教育','本科教育']);//培养层次
const trainingLevelIndex = ref(0);
const academicSystemArray = ref(['请选择类型','四年','五年','六年']);//学制
const academicSystemIndex = ref(0);
const majorArray = ref(['请选择专业','计算机','国际贸易','汉语言']);//专业
const majorIndex = ref(0);
const researchDirectionArray = ref(['请选择专业','计算机','国际贸易','汉语言']);//研究方向
const researchDirectionIndex = ref(0);
const mainForeignLanguage = ref('');//主修外语
const supervisor = ref('');//指导老师
const schoolingFormArray = ref(['请选择','全日制','业务制','函授']);//办学形式
const schoolingFormIndex = ref(0);
const foreignLanguageLevelArray = ref(['请选择','熟悉','普通','精通']);//外语水平
const foreignLanguageLevelIndex = ref(0);
const trainingUnit = ref('');//联合培养单位
const commissionedUnit = ref('');//定向委培单位
const orientationUnitLocation = ref('');//定向委培单位所在地
const educationBase = ref('');//教育基地
const counselor = ref('');//辅导员
const overseasStudent = ref('');//留学人员
const startingStation = ref('');//起始车站 假期乘火车区间信息
const destinationStation = ref('');//终点车站 假期乘火车区间信息
const bankCardNumber = ref('');//银行卡号
const openingBank = ref('');//开户地银行
const bankAffiliation = ref('');//所属银行

const formSubmit = (e)=>{
	console.log(e);
}


// 学生类别选择
const studentCategoryChange = (e)=>{
	
	studentCategoryIndex.value = e.detail.value;
}

// 入学方式选择
const admissionMethodChange = (e)=>{
	
	admissionMethodIndex.value = e.detail.value;
}

// 入学日期选择
const enrollmentDateChange = (e)=>{
	
	enrollmentDate.value = e.detail.value;
}

// 预计毕业日期选择
const expectedGraduationDateChange = (e)=>{
	
	expectedGraduationDate.value = e.detail.value;
}

// 预计答辩日期选择
const expectedDefenseDateChange = (e)=>{
	
	expectedDefenseDate.value = e.detail.value;
}

// 培养方式选择
const trainingMethodChange = (e)=>{
	
	trainingMethodIndex.value = e.detail.value;
}

// 培养院系选择
const trainingDepartmentChange = (e)=>{
	
	trainingDepartmentIndex.value = e.detail.value;
}

// 学生来源选择
const studentSourceChange = (e)=>{
	
	studentSourceIndex.value = e.detail.value;
}

//学习方式选择 
const learningMethodChange = (e)=>{
	
	learningMethodIndex.value = e.detail.value;
}

//学位院系选择 
const degreeDepartmentChange = (e)=>{
	
	degreeDepartmentIndex.value = e.detail.value;
}

//培养层次选择 
const trainingLevelChange = (e)=>{
	
	trainingLevelIndex.value = e.detail.value;
}

//学制
const academicSystemChange = (e)=>{
	
	academicSystemIndex.value = e.detail.value;
}

//专业选择 
const majorChange = (e)=>{
	
	majorIndex.value = e.detail.value;
}

//研究方向选择 
const researchDirectionChange = (e)=>{
	
	researchDirectionIndex.value = e.detail.value;
}

//办学形式选择 
const schoolingFormChange = (e)=>{
	
	schoolingFormIndex.value = e.detail.value;
}
//外语水平选择
const foreignLanguageLevelChange = (e)=>{
	
	foreignLanguageLevelIndex.value = e.detail.value;
}


</script>

<style lang='scss' scoped>
	 scroll-view{
	 	height:73vh;
	 	padding: 20rpx 0;
	 }
	 .rows{
	 	display: flex;
	 	justify-content: space-between;
	 	font-size: 26rpx;
	 	line-height: 60rpx;
	 	border-bottom: 1rpx solid #ccc;
	 	margin-bottom: 20rpx;
	 	.left{
	 		display: flex;
	 		justify-content: space-between;
	 		.star{
	 			color:red;
	 		}
	 	}
	 	.right{
	 		display: flex;
	 		justify-content: space-between;
	 		align-items: center;
	 		text-align: right;
	 		color:$xx-color-body;
	 	}
	 }
	 
	 .but{
	 			width: 500rpx;
	 			height: 80rpx;
	 			border-radius: 40rpx;
	 			background: $xx-color-body;
	 			color: #fff;
				
	 }
	 button::after{ border: none;}
	 button{
	 	line-height:80rpx;
	 }      
</style>